<template>
  <div class="login">
    <van-nav-bar van-icon-arrow-left title="会员登录" class="van-nav-bar" left-arrow @click-left="$router.go(-1)" />
    <div class="container">
      <div class="title">
        <h3>手机号登录</h3>
        <p>未注册的手机号登录后将自动注册</p>
      </div>
      <div class="form">
        <div class="form-item">
          <input class="inp" maxlength="11" placeholder="请输入手机号码" type="text" v-model="phone">
        </div>
        <div class="form-item">
          <input class="inp" maxlength="5" placeholder="请输入图形验证码" type="text" v-model="picKey">
          <img :src="picUrl" alt="" @click="getaxios">
        </div>
        <div class="form-item">
          <input class="inp" placeholder="请输入短信验证码" type="text" v-model="vfc">
          <button @click="getvfc">获取验证码</button>
        </div>
      </div>

      <div class="login-btn" @click="login">登录</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'vant'
import{ mapState,mapMutations} from 'vuex'
export default {
  name: 'LoginPage',
  async created() {
    // Toast.loading({
    //   message: '加载中...',
    //   forbidClick: true,
    //   loadingType: 'spinner', 
    // })
    // setTimeout(() => {
    //   Toast.clear() 
    // })
    this.getaxios()
    // this.getPicCode()
  },
  data() {
    return {
      phone: '',
      picUrl: '',
      picKey: '',
      token: '',
      vfc: '',
      random:0,
      money:100000000
    }
  },
  computed: {
    ...mapState('user',['userInfo']) 
  },
  methods: {
    ...mapMutations('user',['setUserInfo']),
    validFn () {
       if (!/^1[3-9]\d{9}$/.test(this.phone)) {
          this.$toast('请输入正确的手机号')
          return false
       }
       if (!/^\w{4}$/.test(this.picKey)) {
           this.$toast('请输入正确的图形验证码')
           return false
       }
       return true
    },
    // 获取图形验证码
    async getaxios() {
      this.picKey='WJRM'
      const res = await axios({
        url:'http://smart-shop.itheima.net/index.php?s=/api/captcha/image'
      })
      console.log(res.data.data)
      this.picUrl = res.data.data.base64
      this.token = res.data.data.key
      
    },
    getvfc() {
      if(!this.validFn()){
        return false
      }
      const res = axios({
        url:'http://smart-shop.itheima.net/index.php?s=/api/captcha/sendSmsCaptcha',
        method:'post',
        form:{
           captchaCode:this.picKey,
           captchaKey:this.token,
           mobile:this.phone,
        }
      })
      console.log(res)
      Toast('验证码已发送')
      const RandomNum = Math.floor(Math.random() * 1000000);
      this.random = RandomNum;
      this.vfc = RandomNum;
    },
    login() {
      if (!this.phone) {
        alert('请输入手机号码')
        return
      }
      if (!this.picKey) {
        alert('请输入图形验证码')
        return
      }
      if (!this.vfc) {
        alert('请输入短信验证码')
        return 
      }
      if (this.phone.length !== 11) {
        alert('请输入正确的手机号码')
        return
      }
      if (this.picKey!== 'WJRM') {
        alert('请输入正确的图形验证码')
        return
      }
      if(+(this.vfc)!== this.random) {
        console.log(this.vfc)
        alert('请输入正确的短信验证码')
        return
      }
      else {
          this.setUserInfo({
            phone: this.phone,
            token: this.token
          })
          localStorage.setItem('userInfo', JSON.stringify({phone: this.phone
            ,token: this.token}))
          localStorage.setItem('money',this.money)
          Toast({
            message: '登录成功',
            duration: 1000,
            forbidClick: true,
          })
          setTimeout(() => {
             this.$router.push({ path: '/home' })
          }, 1000)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 49px 29px;

  .title {
    margin-bottom: 20px;

    h3 {
      font-size: 26px;
      font-weight: normal;
    }

    p {
      line-height: 40px;
      font-size: 14px;
      color: #b8b8b8;
    }
  }

  .form-item {
    border-bottom: 1px solid #f3f1f2;
    padding: 8px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;

    .inp {
      display: block;
      border: none;
      outline: none;
      height: 32px;
      font-size: 14px;
      flex: 1;
    }

    img {
      width: 94px;
      height: 31px;
    }

    button {
      height: 31px;
      border: none;
      font-size: 13px;
      color: #cea26a;
      background-color: transparent;
      padding-right: 9px;
    }
  }

  .login-btn {
    width: 100%;
    height: 42px;
    margin-top: 39px;
    background: linear-gradient(90deg, #ecb53c, #ff9211);
    color: #fff;
    border-radius: 39px;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1);
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>